<template>
  <div id="points">
    <div class="pointtop">
      <img src="../assets/images/points-top-icon.png">
      <div class="pointsnums">
        <p>可用积分</p>
        <h3>{{pointsinfo.lastpoints}}</h3>
      </div>
      <!-- <div class="allpoints">总积分：{{pointsinfo.allpoints}}</div> -->
    </div>
    <div class="pointstap">
      <tab custom-bar-width="70px">
        <tab-item selected @on-item-click="tabclick">已获得</tab-item>
        <tab-item @on-item-click="tabclick">已使用</tab-item>
        <tab-item @on-item-click="tabclick">已过期</tab-item>
      </tab>
    </div>
    <div class="pointstaptag">
      <scroller class="pointstagli" height="-160" scrollbar-y lock-x :scroll-bottom-offset="60" @on-scroll-bottom="onScrollBottom1" slot="slist1" ref="scrollerBottom1">
        <div class="pointslist" name="slist1">
          <div class="points-li" v-for="(item, iindex) in lists1" :key="iindex">
            <div class="pointtamp">{{ item.ltamp }}</div>
            <div class="pointovertamp">有效期至：{{ item.gettamp }}</div>
            <div class="pointnums">+{{item.tnum}}</div>
          </div>
          <load-more :value="false" :show-loading="isshowload" :tip="loadtip">Loading</load-more>
        </div>
      </scroller>
      <scroller class="pointstagli" height="-160" scrollbar-y lock-x :scroll-bottom-offset="60" @on-scroll-bottom="onScrollBottom2" slot="slist2" ref="scrollerBottom2">
        <div class="pointslist" name="slist2">
          <div class="points-li grayborder" v-for="(item, iindex) in lists2" :key="iindex">
            <div class="pointtamp">{{ item.ltamp }}</div>
            <div class="pointovertamp">有效期至：{{ item.gettamp }}</div>
            <div class="pointnums">{{item.tnum}}</div>
          </div>
          <load-more :value="false" :show-loading="isshowload" :tip="loadtip">Loading</load-more>
        </div>
      </scroller>
      <scroller class="pointstagli" height="-160" scrollbar-y lock-x :scroll-bottom-offset="60" @on-scroll-bottom="onScrollBottom3" slot="slist3" ref="scrollerBottom3">
        <div class="pointslist" name="slist3">
          <div class="points-li grayborder" v-for="(item, iindex) in lists3" :key="iindex">
            <div class="pointtamp">{{ item.ltamp }}</div>
            <div class="pointovertamp">有效期至：{{ item.gettamp }}</div>
            <div class="pointnums" >{{item.tnum}}</div>
          </div>
          <load-more :value="false" :show-loading="isshowload" :tip="loadtip">Loading</load-more>
        </div>
      </scroller>
    </div>
  </div>
</template>

<script>
  import { Tab, TabItem, Badge, LoadMore, Scroller } from 'vux'
  export default{
    name: 'points',
    components: {
      Badge,
      Tab,
      TabItem,
      LoadMore,
      Scroller
    },
    data () {
      return {
        isupload: false,
        isshowload: false,
        loadtip: '',
        bottomCount1: 0,
        bottomCount2: 0,
        bottomCount3: 0,
        upList: [],
        lists1: [],
        lists2: [],
        lists3: [],
        pointsinfo: {}
      }
    },
    created () {
      // show usable list
      this.getList(this.bottomCount1, 'usable')
      .then((data) => {
        this.lists1.push.apply(this.lists1, data)
        if (data.length > 0) {
          this.bottomCount1 = this.lists1.length
        }
      }, () => {})
      // show used list
      this.getList(this.bottomCount2, 'used')
      .then((data) => {
        this.lists2.push.apply(this.lists2, data)
        if (data.length > 0) {
          this.bottomCount2 = this.lists2.length
        }
      }, () => {})
      // show overtime list
      this.getList(this.bottomCount3, 'overtime')
      .then((data) => {
        this.lists3.push.apply(this.lists3, data)
        if (data.length > 0) {
          this.bottomCount3 = this.lists3.length
        }
      }, () => {})
      // get detail
      this.$axios.post(this.apidomain + '/api/integralMall/getIntegralSum/' + this.getCookie('appid'), {
        openId: this.getCookie('openid')
      })
      .then((response) => {
        this.pointsinfo = response.data.data
      })
      .catch(function (error) {
        console.log(error)
      })
    },
    methods: {
      tabclick: function (index) {
        this.swiperItemIndex = index
        const taplist = document.querySelectorAll('.pointstagli')
        for (var i = 0; i < taplist.length; i++) {
          if (index === i) {
            taplist[i].style.display = 'block'
          } else {
            taplist[i].style.display = 'none'
          }
        }
      },
      getList: function (lastnumber, type) {
        return this.$axios.post(this.apidomain + '/api/integralMall/getCustPointRecordListAPI/' + this.getCookie('appid'), {
          openId: this.getCookie('openid'),
          type: type,
          pageIndex: lastnumber
        })
        .then((response) => {
          return response.data.data
        })
        .catch(function (error) {
          console.log(error)
          return []
        })
      },
      onScrollBottom1 () {
        if (this.isupload) {
          this.isshowload = true
          this.loadtip = '加载中...'
        } else {
          this.isupload = true
          setTimeout(() => {
            this.$nextTick(() => {
              this.getList(this.bottomCount1, 'usable')
              .then((data) => {
                this.lists1.push.apply(this.lists1, data)
                if (data.length > 0) {
                  this.bottomCount1 += 10
                }
              }, () => {})
              this.$refs.scrollerBottom1.reset()
              this.isshowload = false
              this.loadtip = ''
              this.isupload = false
            })
          }, 1000)
        }
      },
      onScrollBottom2 () {
        if (this.isupload) {
          this.isshowload = true
          this.loadtip = '加载中...'
        } else {
          this.isupload = true
          setTimeout(() => {
            this.$nextTick(() => {
              this.getList(this.bottomCount2, 'used')
              .then((data) => {
                this.lists2.push.apply(this.lists2, data)
                if (data.length > 0) {
                  this.bottomCount2 += 10
                }
              }, () => {})
              this.$refs.scrollerBottom2.reset()
              this.isshowload = false
              this.loadtip = ''
              this.isupload = false
            })
          }, 1000)
        }
      },
      onScrollBottom3 () {
        if (this.isupload) {
          this.isshowload = true
          this.loadtip = '加载中...'
        } else {
          this.isupload = true
          setTimeout(() => {
            this.$nextTick(() => {
              this.getList(this.bottomCount3, 'overtime')
              .then((data) => {
                this.lists3.push.apply(this.lists3, data)
                if (data.length > 0) {
                  this.bottomCount3 += 10
                }
              }, () => {})
              this.$refs.scrollerBottom3.reset()
              this.isshowload = false
              this.loadtip = ''
              this.isupload = false
            })
          }, 1000)
        }
      }
    }
  }
</script>
<style lang="less">
@import '../assets/less/points/list.less';
</style>
